<template>
  <div style="background-color: white; position: relative;width:100%;display: flex;justify-content: center;">
    <div class="main">
     <div class="tip">我们能为您提供什么帮助 ？</div>
      <div style="margin-top: 40px;">
        <input type="text" class="search-box" v-model="key" placeholder="搜索您感兴趣的新闻">
        <button class="search-button" @click="getSearchNews()">搜索</button>
      </div>
      <div>
       <div class="new-item" v-for="(item , index) in newsList" :key="index">
        <div class="left">
          <img :src="item.coverImage" alt="" style="width:100%;height:100%;">
        </div>
        <div class="right">
          IN ALL,NEW FEATURE,WHATS NEW ON SEPTEMBER 17,2020
          <div class="title">
            {{ item.title }}  Lorem ipsum dolor sit amet, adhuc a. Lorem ipsum d
          </div>
          Lorem ipsum dolor sit amet, adhuc nulla. Lorem ipsum dolorsit amet, adhuc nulla.
        </div>

      </div>
      </div>

      <div class="page">
        <button class="page-button"><el-icon><ArrowLeftBold /></el-icon></button>
        <div style="width:30px;display: inline-block"></div>
        <button class="page-button"> <el-icon><ArrowRightBold /></el-icon> </button>
      </div>
    </div>


    <div class="Group993" style="width: 212px; height: 32px; left: 53px; top: 41px; position: absolute">
      <div class="Newsletter"
           style="left: 0px; top: 2px; position: absolute; text-align: center; color: #119C59; font-size: 25px; font-family: Montserrat; font-weight: 700; text-transform: uppercase; letter-spacing: 0.20px; word-wrap: break-word">
        Newsletter</div>
      <div class="App"
           style="left: 183px; top: 0px; position: absolute; text-align: center; color: #333333; font-size: 14px; font-family: Montserrat; font-weight: 700; letter-spacing: 0.20px; word-wrap: break-word">
        App</div>
      <div class="back" @click="back()">
        <el-icon style="font-size: 22px; vertical-align: middle;margin-bottom:3px;"><Back /></el-icon>
        &nbsp;
        <div style="display: inline-block;">返回</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import { useRouter,useRoute } from 'vue-router'
import {getAllNewsList, getSearchNewsList} from "@/api/news";
import { NewItem } from "@/api/news/type";
// 使用useRoute方法获取路由信息
const route = useRoute()
const router = useRouter()
//搜索新闻列表
const newsList = ref<NewItem[]>()
//搜索关键词
const key = ref<string>('')
onMounted(async() => {
  key.value = <string>route.query.key
  console.log(key)
  await getSearchNews()
})
const getSearchNews = async() => {
  try {
    const { data } = await getSearchNewsList(key.value)
    newsList.value = data
  } catch(error) {
    await Promise.reject(error)
  }
}
const back = () => {
  router.push({path:'/home'})
}
</script>

<style scoped>
.main{
  /*border: 1px dashed black;*/
  margin-top: 15%;
  width:62%;
  height:60%;
  text-align: center;
}
.tip {
  color:#14B86E;
  font-size: 44px;
  font-weight: 300;
  text-align: left;
}
.search-box {
  width:70%;
  height:52px;
  border: 4px solid #14B86E;
  border-radius: 36px;
  background-color: #fcfaf9;
  padding-left: 30px;
  padding-top: 2px;
  font-size: 20px;
  margin-bottom: 30px;
}
.search-box:focus {
  outline: none;
}
.search-box::-webkit-input-placeholder {
  font-weight:normal;
  font-size: 20px;
}
.search-button {
  margin-left: 3%;
  width:195px;
  height:62px;
  background-color: #219653;
  border: 0;
  border-radius: 36px;
  color:white;
  float: right;
  font-size: 20px;

}
.back {
  font-size: 16px;
  margin-top: 40%;
}
.new-item {
  margin-top: 100px;
  /*border: 1px dashed black;*/
  width:100%;
  height:201px;
  display: flex;
}
.left {
  width:333px;
  height:100%;
  margin-right: 6%;
  display: inline-block;
}
.right {
  display: inline-block;
  width:54%;
  font-size: 16px;
  font-weight: 300;
  padding-top: 10px;
  padding-bottom: 10px;
}
.title {
  margin-bottom: 20px;
  margin-top: 15px;
  font-size: 32px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page {
  margin-top: 130px;
  height:100px;
  width:100%;

}
.page-button {
   width:50px;
   height:50px;
   border-radius: 15px;
   color:#119C59;
   border: 3px solid #119C59;
  font-size: 18px;
}
</style>
